{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load icons %}

{% comment %} {% block title %}{% trans "Create new instance" %} - {% trans "Select Type" %}{% endblock %}

{% block page_heading%}
{% blocktrans with host=compute.name %}New instance on {{ host }} {% endblocktrans %}
{% endblock page_heading %} {% endcomment %}


{% block content %}
    {% include 'pleasewaitdialog.html' %}

    {% if form.errors %}
        {% for field in form %}
            {% for error in field.errors %}
                <div class="alert alert-danger">
                    <strong>{{ field.label }}:</strong> <span>{{ error|escape }}</span>
                </div>
            {% endfor %}
        {% endfor %}
        {% for error in form.non_field_errors %}
            <div class="alert alert-danger">
                <strong>{{ error|escape }}</strong>
            </div>
        {% endfor %}
    {% endif %}

    <!--block content-->
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                <h2 class="page-title">
                    {{ compute.name }}
                </h2>
                </div>
            </div>
        </div>
    </div>

    

    <!-- Page body -->
    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div class="card-header">
                  <ul class="nav nav-tabs card-header-tabs flex-row-reverse" data-bs-toggle="tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                      <a href="#tabs-home-8" class="nav-link active" data-bs-toggle="tab" aria-selected="true" role="tab">{% trans "Architecture" %}</a>
                    </li>
                    <li class="nav-item" role="presentation">
                      <a href="#tabs-profile-8" class="nav-link" data-bs-toggle="tab" aria-selected="false" role="tab" tabindex="-1">{% trans "XML" %}</a>
                    </li>
                    {% comment %} <li class="nav-item me-auto" role="presentation">
                      <a href="#tabs-settings-8" class="nav-link" title="Settings" data-bs-toggle="tab" aria-selected="false" tabindex="-1" role="tab"><!-- Download SVG icon from http://tabler-icons.io/i/settings -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                      </a>
                    </li> {% endcomment %}
                  </ul>
                </div>
                <div class="card-body">
                  <div class="tab-content">
                    <div class="tab-pane active show" id="tabs-home-8" role="tabpanel">
                        <div role="tabpanel" class="tab-pane tab-pane-bordered active" id="select_architecture">    
                            <form method="post" role="form" aria-label="Select instance architecture form">{% csrf_token %}
                                <div class="row">
                                    <label class="col-sm-3 col-form-label">{% trans "Architecture" %}</label>
                                    <div class="col-sm-6">
                                        <select class="form-select" id="select_archs" name="archs" onchange="get_machine_types({{ compute_id }}, value);">
                                            {% for hpv in hypervisors %}
                                            <option value="{{ hpv }}" {% if hpv == default_arch %}selected{% endif %}>{{ hpv }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <label class="col-sm-3 col-form-label">{% trans "Chipset" %}</label>
                                    <div class="col-sm-6">
                                        <select class="form-select" id="select_chipset" name="chipset">
                                        <!-- fill with script -->
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="d-grid col-sm-6 offset-3 mt-3">
                                    <button class="btn btn-primary" type="button" name="create_instance" onclick="goto_create()">
                                            {% trans "Next" %}
                                    </button>
                                    </div>
                                </div>
                            </form>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tabs-profile-8" role="tabpanel">
                        <div role="tabpanel" class="tab-pane tab-pane-bordered" id="addFromXML">
                            <div>
                                <form method="post"  role="form" aria-label="Create instance with XML form">{% csrf_token %}
                                    <div class="col-sm-12" id="xmlheight2">
                                        <input type="hidden" name="dom_xml"/>
                                        <div id="editor" class="ace_editor"></div>
                                    </div>
                                    <button type="submit" class="btn btn-primary float-end" name="create_xml" onclick="showPleaseWaitDialog()">
                                        {% trans "Create" %}
                                    </button>
                                </form>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
        </div>
    </div>
{% endblock %}
{% block script %}
<script>
    $(document).ready(function () {
        let arch = $("#select_archs").val();
        get_machine_types({{ compute_id }}, arch);
    });

    function get_machine_types(compute_id, arch) {
        get_machine_type_url = "/computes/" + compute_id + "/archs/" + arch + "/machines";
        $.getJSON(get_machine_type_url, function (data) {
            $("#select_chipset").find('option').remove();
            $("#select_archs").val(arch);
            $.each(data['machines'], function(i, item) {
                if (item == '{{ default_machine }}') {
                    var selected = 'selected';
                }else{
                    var selected = '';
                }
                $("#select_chipset").append('<option value="' + item + '"' + selected +'>' + item + '</option>');
            });
        });
    }
</script>

<script src="{% static "js/ace/ace.js" %}"></script>
<script>
    var editor = ace.edit("editor");
    editor.getSession().setMode("ace/mode/xml");

    var input = $('input[name="dom_xml"]');
    editor.getSession().on("change",function () {
        input.val(editor.getSession().getValue());
    })
</script>
{% if request.user.is_superuser %}
    <script>
        function goto_create() {
            let compute = '{{ compute.id }}';
            let arch = $("#select_archs").val();
            let machine = $("#select_chipset").val();
            //create_machine_url = "/computes/" + compute + "/create/archs/" + arch + "/machines/" + machine;
            url = "{% url 'instances:create_instance' compute.id 'x86_64' 'pc' %}".replace(/x86_64/, arch).replace(/pc/, machine);
            window.location.href = url;//create_machine_url;
        }

    </script>
{% endif %}
{% endblock %}
